<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* first-child first-of-type  一组兄弟元素中第一个元素 */
        div:first-child {
            color: burlywood;
        }

        div:first-of-type {
            color: aquamarine;
        }
        /* 一组兄弟元素中选中第2个 2n 偶数位的都会被选中 2n + 1 奇数位会被选中 */
        /* odd 奇数位置 */
        /* even 偶数位置 */
        div:nth-of-type(even) {
            color: blue;
        }

        /* 前面的标签是否满足has里面的条件 如果满足就被选中 */
        /* h1:has(div) --> h1是否有div后代元素 如果有就被选中 */
        /* h1:has(+h2) --> h1是有相邻的h2兄弟元素，如果有就被选中*/
        h1:has(div){
            color: red;
        }
        /* 所有div内部含有span直接子元素的被选中 */
        div:has(>span) {
            color: brown;
        }

    </style>
</head>
<body>
    <h2>kfm</h2>
    <h1><div></div>hello</h1>
    <h1>王者</h1>
    <div>安琪拉</div>
    <div>貂蝉</div>
    <div>蔡文姬</div>
    <div>梦琪</div>
    <div>赵云</div>
    <div>周瑜</div>
    <div><p><span>test</span></p>大乔</div>
    <div>小乔</div>

</body>
</html>